<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件冒泡</title>
        <style type="text/css">
            * {
                margin: 50px ;
                border: 2px solid transparent;
                min-height: 100px ;
            }
            html { border-color: gray ; }
            body { border-color: blue ; }
            div { border-color: red ;}
        </style>
    </head>
    <body>

        <div>事件冒泡</div>

        <script type="text/javascript">
            const html = document.querySelector( 'html' );

            const type = 'click' ;
            // 当 capture 为 false 时表示在 冒泡阶段处理事件
            const capture = false ;

            html.addEventListener( type , function(e){
                console.log( 'html : listener' , ' , target: ' , e.target );
            } , capture );
            
            const body = document.body ;
            body.addEventListener( type , function(e){
                console.log( 'body : listener' , ' , target: ' , e.target );
            } , capture );
            
            const div = document.querySelector( 'div' );
            div.addEventListener( type , function(e){
                console.log( 'div : listener' , ' , target: ' , e.target );
            } , capture );

        </script>
        
    </body>
</html>